<template>
  <bs-dialog
    v-model="visible"
    :title="title"
    :width="500"
    :confirmBtnFn="handleConfirm"
  >
    <bs-form class="form" ref="formRef" :rules="rules" :grid="1" :model="formData">
      <bs-form-item label="管理账号" prop="account">
        <bs-select v-model="formData.account"></bs-select>
      </bs-form-item>
      <bs-form-item label="协议端口">
        <bs-select></bs-select>
      </bs-form-item>
    </bs-form>
  </bs-dialog>
</template>
<script lang="ts" setup>
import {ref, nextTick} from 'vue'
import * as API from '@/service/modules/resource'
const initFormData = () => ({
  account: ''
})
const formData = ref(initFormData())
const formRef = ref()
const visible = ref(false)
const title = '关联账户'
const info = ref()
const rules = {}

const open = (item:any) => {
  visible.value = true
  info.value = item
  formData.value = initFormData()
  nextTick(() => {
    setTimeout(() => {
      formRef.value.clearValidate()
    })
  })
}
/**
 * 关联账户
 */
const handleConfirm = async () => {
  await formRef.value.validate()
  const params = {
    ...formData.value
  }
  await API.contactDiviceAccount(params)
  return 1
}
defineExpose({
  open
})
</script>
<style lang="scss" scoped>
.form {
  padding: 16px;
}
</style>